<template>
    <div class="termSet">
         <div class="experience_inputs">
            <div class="creatBtn">
                <div class="add_item" @click="outerVisible = true">添加学期</div>
            </div>
        </div>
         <!-- 添加学期 -->
        <el-dialog title="学期规则" 
            :close-on-click-modal=false 
            :modal=false
            :visible.sync="outerVisible">
            <el-form>
                <el-form-item label="学期类型：" :label-width="formLabelWidth">
                    <el-input v-model="title" class="divided_220"></el-input>
                </el-form-item>
                <el-form-item label="春学期：" :label-width="formLabelWidth">
                    <div class="block">
                        <el-date-picker
                            v-model="season.sp_start"
                            type="date"
                            value-format="yyyy-MM-dd"
                        placeholder="开始日期">
                        </el-date-picker>
                        <el-date-picker
                            v-model="season.sp_end"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="结束日期">
                        </el-date-picker>
                    </div>
                </el-form-item>
                <el-form-item label="暑假：" :label-width="formLabelWidth">
                    <div class="block">
                        <el-date-picker
                            v-model="season.su_start"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="开始日期">
                        </el-date-picker>
                        <el-date-picker
                            v-model="season.su_end"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="结束日期">
                        </el-date-picker>
                    </div>
                </el-form-item>
                
                <el-form-item label="秋学期：" :label-width="formLabelWidth">
                    <div class="block">
                        <el-date-picker
                            v-model="season.fa_start"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="开始日期">
                        </el-date-picker>
                        <el-date-picker
                            v-model="season.fa_end"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="结束日期">
                        </el-date-picker>
                    </div>
                </el-form-item>
                <el-form-item label="寒假：" :label-width="formLabelWidth">
                    <div class="block">
                        <el-date-picker
                            v-model="season.wi_start"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="开始日期">
                        </el-date-picker>
                        <el-date-picker
                            v-model="season.wi_end"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="结束日期">
                        </el-date-picker>
                    </div>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button class="dialog_close" @click="outerVisible = false">关闭</el-button>
                <el-button class="dialog_confirm" type="primary" @click="addTerm">保存</el-button>
            </div>
        </el-dialog>

        <el-table
            :data="termLists"
            stripe 
            size="mini"
            border resizable
            style="width: 100%"
            :height="tableHeight">
            <el-table-column label="学期规则编号" :align="align">
                <template slot-scope="scope">{{scope.row.id}} </template>
            </el-table-column>
            <el-table-column label="春学期" :align="align">
                <template slot-scope="scope">
                    <div>开始时间：{{scope.row.sp_start_month}}-{{scope.row.sp_start_day}}</div>
                    <div>结束时间：{{scope.row.sp_end_month}}-{{scope.row.sp_end_day}}</div>
                </template>
            </el-table-column>
            <el-table-column label="暑假" :align="align">
                <template slot-scope="scope">
                    <div>开始时间：{{scope.row.su_start_month}}-{{scope.row.su_start_day}}</div>
                    <div>结束时间：{{scope.row.su_end_month}}-{{scope.row.su_end_day}}</div>
                </template>
            </el-table-column>
            <el-table-column label="秋学期" :align="align">
                <template slot-scope="scope">
                    <div>开始时间：{{scope.row.fa_start_month}}-{{scope.row.fa_start_day}}</div>
                    <div>结束时间：{{scope.row.fa_end_month}}-{{scope.row.fa_end_day}}</div>
                </template>
            </el-table-column>
            <el-table-column label="寒假" :align="align">
                <template slot-scope="scope">
                    <div>开始时间：{{scope.row.wi_start_month}}-{{scope.row.wi_start_day}}</div>
                    <div>结束时间：{{scope.row.wi_end_month}}-{{scope.row.wi_end_day}}</div>
                </template>
            </el-table-column>                 
            <el-table-column 
                fixed="right" 
                align="center"
                label="操作">
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        @click='editTerm(scope.row.id)'>编辑</el-button>
                    <el-button
                        size="mini">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script>
import base from './../api/base.js'
export default {
    data(){
        return{
            tableHeight:window.innerHeight-300,
            termLists:[],
            columWidth:240,
            align:'center',
            termid:'',//编辑删除

            outerVisible:false,
            formLabelWidth: '200px',
            season:{
                sp_start:'',
                sp_end:'',
                su_start:'',
                su_end:'',
                fa_start:'',
                fa_end:'',
                wi_start:'',
                wi_end:'',
            },
            title:'',
            sp_start_month:'',//春季
            sp_start_day:'',
            sp_end_month:'',
            sp_end_day:'',
            su_start_month:'',//夏季
            su_start_day:'',
            su_end_month:'',
            su_end_day:'',
            fa_start_month:'',//秋季
            fa_start_day:'',
            fa_end_month:'',
            fa_end_day:'',
            wi_start_month:'',//冬季
            wi_start_day:'',
            wi_end_month:'',
            wi_end_day:'',
        }
    },  
    methods:{
        getTermList(){
             this.$axios({
                url: base.baseUrl+"/school/setting/get-term-list",
                method: "POST",
                header: { 'content-type': 'application/x-www-form-urlencoded' },
                data:{
                    token:localStorage.token,
                },
                transformRequest: [function (data) {
                    let ret = ''
                    for (let it in data) {
                        ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
                    }
                    return ret
                }],
            }).then(res => {
                if(res.data.code==200){
                    this.termLists=res.data.data
                }
            });
        },

        addTerm(){
            //春季
            var arr1=this.season.sp_start.split('-')
            this.sp_start_month=arr1[1]
            this.sp_start_day=arr1[2]
            var arr2=this.season.sp_end.split('-')
            this.sp_end_month=arr2[1]
            this.sp_end_day=arr2[2]
            // 夏季
            var arr3=this.season.su_start.split('-')
            this.su_start_month=arr3[1]
            this.su_start_day=arr3[2]
            var arr4=this.season.su_end.split('-')
            this.su_end_month=arr4[1]
            this.su_end_day=arr4[2]
            // 秋季
            var arr5=this.season.fa_start.split('-')
            this.fa_start_month=arr5[1]
            this.fa_start_day=arr5[2]
            var arr6=this.season.fa_end.split('-')
            this.fa_end_month=arr6[1]
            this.fa_end_day=arr6[2]
            // 冬季
            var arr7=this.season.wi_start.split('-')
            this.wi_start_month=arr7[1]
            this.wi_start_day=arr7[2]
            var arr8=this.season.wi_end.split('-')
            this.wi_end_month=arr8[1]
            this.wi_end_day=arr8[2]

            this.saveAdd()
        },
        saveAdd(){
             this.$axios({
                url: base.baseUrl+"/school/setting/edit-term",
                method: "POST",
                header: { 'content-type': 'application/x-www-form-urlencoded' },
                data:{
                    token:localStorage.token,
                    title:this.title,
                    termid:this.termid,
                    sp_start_month:this.sp_start_month,
                    sp_start_day:this.sp_start_day,
                    sp_end_month:this.sp_end_month,
                    sp_end_day:this.sp_end_day,
                    su_start_month:this.su_start_month,
                    su_start_day:this.su_start_day,
                    su_end_month:this.su_end_month,
                    su_end_day:this.su_end_day,
                    fa_start_month:this.fa_start_month,
                    fa_start_day:this.fa_start_day,
                    fa_end_month:this.fa_end_month,
                    fa_end_day:this.fa_end_day,
                    wi_start_month:this.wi_start_month,
                    wi_start_day:this.wi_start_day,
                    wi_end_month:this.wi_end_month,
                    wi_end_day:this.wi_end_day,
                },
                transformRequest: [function (data) {
                    let ret = ''
                    for (let it in data) {
                        ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
                    }
                    return ret
                }],
            }).then(res => {
                this.alertTip(res.data.msg)
                if(res.data.code==200){
                    this.outerVisible=false
                    this.getTermList()
                }
            });
        },
        // 编辑
        editTerm(e){
            this.termid=e
            this.outerVisible=true
            var year=new Date().getFullYear()
            this.$axios({
                url: base.baseUrl+"/school/setting/get-term-info",
                method: "POST",
                header: { 'content-type': 'application/x-www-form-urlencoded' },
                data:{
                    token:localStorage.token,
                    termid:this.termid
                },
                transformRequest: [function (data) {
                    let ret = ''
                    for (let it in data) {
                        ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
                    }
                    return ret
                }],
            }).then(({data}) => {
                if(data.code==200){
                    this.season.sp_start=year+'-'+data.data.sp_start_month+'-'+data.data.sp_start_day
                    this.season.sp_end=year+'-'+data.data.sp_end_month+'-'+data.data.sp_end_day
                    this.season.su_start=year+'-'+data.data.su_start_month+'-'+data.data.su_start_day
                    this.season.su_end=year+'-'+data.data.su_end_month+'-'+data.data.su_end_day
                    this.season.fa_start=year+'-'+data.data.fa_start_month+'-'+data.data.fa_start_day
                    this.season.fa_end=year+'-'+data.data.fa_end_month+'-'+data.data.fa_end_day
                    this.season.wi_start=year+'-'+data.data.wi_start_month+'-'+data.data.wi_start_day
                    this.season.wi_end=year+'-'+data.data.wi_end_month+'-'+data.data.wi_end_day
                    this.title=data.data.title
                }
            });
        },
        alertTip(msg){
            this.$alert(msg, '提示', {
                confirmButtonText: '确定',
                callback: action => {
                    this.$message({
                        type: 'info',
                    });
                }
            });
        },
    },
    created() {
        this.getTermList()  
    }
}
</script>
<style lang="less" scoped>
    .termSet{
         .experience_inputs{
            height: 60px;
            box-sizing: border-box;
            background: #f5f5f5;
            padding-top: 10px;
            display: flex;
            .creatBtn{
                width: 240px;
                cursor: pointer;
            }
            .operate_inputs{
                // padding: 15px 30px;
                height: 70px;
                box-sizing: border-box;
                button{
                    width: 130px;
                    height: 38px;
                    border-radius: 4px;
                    border: none;
                }
                .search_btn{       
                    background-color: #ff5263;
                }
                .reset_btn{
                    background-color: #808080;
                }
            }
        }
    }
</style>

